<template>
  <div >
    <Chart :cdata="cdata" style="width: 300px" />
  </div>
</template>

<script>
import Chart from './chart.vue';
import {getArea} from "@/api/system/factory";

function toName(res){
//   // 遍历 seriesData,用 names 数组替换 name 属性
  const newSeriesData = res.map(item => {
    return item.name
  });
//
//   // newSeriesData 为转换后的结果
//   console.log(newSeriesData);
  return newSeriesData
}
export default {
  data () {
    return {
      cdata: {
        xData: ["呼和浩特", "鄂尔多斯", "包头市", "呼伦贝尔", "通辽", "乌海"],
        seriesData: [
          { value: 10, name: "呼和浩特" },
          { value: 5, name: "鄂尔多斯" },
          { value: 15, name: "包头市" },
          { value: 25, name: "呼伦贝尔" },
          { value: 20, name: "通辽" },
          { value: 35, name: "乌海" }
        ]
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
  this.getData()
  },
  methods: {
    getData(){
      getArea().then(res=>{
        this.cdata.seriesData = res;
        this.cdata.xData = toName(res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
